{include file="common/header"/}
<style>
    .layui-table-cell{
        height: 60px;
        line-height: 60px;
    }
    .layui-layer-content img{
        max-width: 500px;
        max-height: 700px;
        display: block;
        margin: 5px auto 25px;
    }
</style>
<div class="lemo-container">
    <div class="lemo-main">
        <div class="admin-main layui-anim layui-anim-upbit">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>列表</legend>
                <blockquote class="layui-elem-quote">
                    <div class="lemo-table">
                        <div class="layui-inline">
                            <input type="text" name="mobile" id='mobile'  placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
						<div class="layui-inline">
						    <input type="text" name="interests_name" id='interests_name'  placeholder="请输入权益名称" autocomplete="off" class="layui-input">
						</div>
                        <a  href="javascript:;" class="layui-btn data-add-btn layui-btn-sm" lay-submit="" lay-filter="add" id="search1">
                            {:lang('search')}
                        </a>
                        <a  href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger reset" lay-filter="reset" id="reset">
                            重置
                        </a>
						<a  href="javascript:;" class="layui-btn data-add-btn layui-btn-sm" lay-submit="" lay-filter="export" id="export">
						    导出年卡
						</a>
                    </div>
                </blockquote>
            </fieldset>
            <table class="layui-table" id="list" lay-filter="list"></table>
			<!--导出表 不展示-->
			<div style="display: none;">
				<table id="data_export">
				</table>
			</div>
        </div>
    </div>
</div>


<!--<script type="text/html" id="action">-->
<!--    <a data-href="{:url('edit')}?id={{d.id}}" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">{:lang('edit')}</a>-->
<!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('delete')}</a>-->
<!--</script>-->
<script type="text/html" id="status">
    <input type="checkbox" name="status"  value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="type">
    {{# if(d.type == 1){ }}
		<a class="layui-btn layui-btn-xs" >月卡</a>
    {{# }else if(d.type == 2){ }}
		<a class="layui-btn layui-btn-xs" >年卡</a>
	{{# } 
	}}
</script>
<script type="text/html" id="create_time">
    {{layui.util.toDateString(d.create_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
</script>
<script type="text/html" id="icon">
    <img class="img_sp" height="50px" src="{{d.icon}}" onclick="previewImgs(this)" />
</script>
{include file="common/footer"/}
<script>
    var tableIn;
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        var width = 550; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
    layui.config({
        base: "/static/admin/js/",
        version: true
    }).extend({
        Admin: 'Admin'
    }).use(['element','form', 'layer', 'Admin','table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        tableIn = table.render({
            elem: '#list',
            url: '{:url("coupon")}',
            method: 'post',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', fixed: true, sort: true},
                {field: 'mobile', title: '手机号'},
                {field: 'username', title: '姓名'},
                {field: 'coupon_code', title: '券码编号'},
                {field: 'coupon_code_psd', title: '卡密'},
                {field: 'interests_name', title: '权益名称'},
                {field: 'type',width:200, title: '类型', templet:'#type'},
                {field: 'create_time',width:200, title: '添加时间', templet:'#create_time'},
                // {title:'操作',width:200, toolbar: '#action',align:"center"},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });
        //搜索
        $(document).on('click','#search1',function(){
            var mobile = $('#mobile').val();
            var interests_name = $('#interests_name').val();
            // if(!$keys){
            //     return layer.msg('请输入关键词');
            // }
            tableIn.reload({ page: {page: 1},where: {mobile: mobile , interests_name: interests_name}});
        });
		//导出数据
		$("#export").click(function(){
			var mobile = $('#mobile').val();
			var interests_name = $('#interests_name').val();
			var index  = layer.load(1, {shade: [0.3, '#fff']});
			var ins1=table.render({
				elem: '#data_export',
				url: "{:url('export')}", //此处为所上传的请求路径
				method: 'post',
				title: '兑换年卡表',
				where: {
					mobile:mobile,
					interests_name:interests_name,
				},
				cols: [[
					{field: 'xuhao', title: '序号', width: 100,},
					{field: 'interests_name', title: '权益名称', width: 120, },
					{field: 'username', title: '姓名', width: 120, },
					{field: 'coupon_code', title: '身份证号'},
					{field: 'mobile', title: '手机号', width: 120,},
				]],
				done: function (res, curr, count) {
					if (res.code == 1) {
						layer.close(index) //加载完数据
						exportData=res.data;
						table.exportFile(ins1.config.id,exportData, 'xlsx');
					} else {
						layer.msg(res.msg, {icon:2});
						layer.close(index) //加载完数据
					}  
				}
			});
		});
    });
</script>